<script setup>
import { MoreFilled } from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import { getCode, login, giteeUrl } from "../../services/login";
import { useRouter } from "vue-router";
import { elNotificationStore } from "../../store/LoginSuccessStore";
const elNotStore = elNotificationStore();
const router = useRouter();
const option = reactive({
  submitBtn: false,
  emptyBtn: false,
  column: [
    {
      row: true,
      maxlength: 32,
      showWordLimit: true,
      span: 20,
      prop: "userName",
      label: "用户名",
      rules: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    },
    {
      span: 20,
      prop: "password",
      label: "密码",
      type: "password",
      showPassword: true,
      rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
    },
    {
      span: 14,
      prop: "code",
      label: "验证码",
      autocomplete: "off",
      rules: [{ required: true, message: "请输入验证码", trigger: "blur" }],
    },
    {
      span: 6,
      labelWidth: 0,
      prop: "img",
    },
  ],
});
const captcha = ref({});
const obj = ref({});
//gitee url
const giteeLoginUrl = ref("");

//登录url
const getGiteeLoginUrl = function () {
  giteeUrl("user")
    .then((res) => {
      giteeLoginUrl.value = res.data;
    })
    .catch((error) => {});
};
//验证码
const codeInfo = function () {
  getCode()
    .then((res) => {
      captcha.value = res.data;
      obj.value.codeKey = captcha.value.uuid;
    })
    .catch((error) => {});
};
// 提价
const submit = function (form, done) {
  obj.value.type = 1;
  login(obj.value)
    .then((res) => {
      let userData = {
        username: res.data.username, //账号
        fullName: res.data.fullName, // 姓名
        headPic: res.data.headPic, // 头像
        endTime: res.data.endTime, //最新登录时间
        roleName: res.data.roleName, //角色
        id: res.data.id,
      };
      localStorage.setItem("userData", JSON.stringify(userData));
      router.push("/");
      elNotStore.setIsShow(1);
    })
    .catch((error) => {
      done(form);
    });
};
onMounted(() => {
  codeInfo();
  getGiteeLoginUrl();
});
</script>
<template>
  <div class="login">
    <el-card class="box-card">
      <span>用户-登录</span>
      <avue-form
        class="login_from"
        ref="form"
        :option="option"
        v-model="obj"
        @submit="submit"
      >
        <template v-slot:img>
          <div class="code">
            <img :src="captcha.img" alt="验证码" @click="codeInfo" />
          </div>
        </template>
      </avue-form>
      <el-button
        type="primary"
        size="default"
        plain
        @click="$refs.form.submit()"
        >登录</el-button
      >
      <span style="margin-left: 3%; text-align: center; font-size: 12px">
        <router-link to="/register">没有账号</router-link>
      </span>
      <span class="otherLogin">
        <el-popover placement="top-start" title="" width="200" trigger="hover">
          <el-tooltip
            class="item"
            effect="dark"
            content="gitee登录"
            placement="top-start"
          >
            <a :href="giteeLoginUrl">
              <el-avatar :size="30">
                <img src="../../assets/images/giteelog.png" />
              </el-avatar>
            </a>
          </el-tooltip>
          <template #reference>
            <el-button circle :icon="MoreFilled" type="primary"></el-button>
          </template>
        </el-popover>
      </span>
    </el-card>
    <div class="record">
      <a href="https://beian.miit.gov.cn/" target="_blank"
        >备案号： 蜀ICP备19022468号-2</a
      >
    </div>
  </div>
</template>

<style lang="less" scoped>
.login_from {
  margin-top: 2%;
}
.box-card {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30%;
  overflow: visible;
  width: 40%;
  height: 40%;
  margin-top: 14%;
  text-align: center;
}

.login {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url("../../assets/images/AI4.webp");
  background-size: cover;
}
.record {
  text-align: right;
  margin-bottom: 1%;
  margin-right: 1%;
  a {
    text-decoration: none;
  }
}
.otherLogin {
  margin-left: 3%;
  text-align: center;
  font-size: 12px;
}
.otherLogin:hover {
  cursor: pointer;
}
.login_avatar:hover {
  cursor: pointer;
}
</style>
